<template>
  <view class="article-container">
    <view class="article-wrapper">
      <view class="article-cover" :style="{ backgroundImage: `url(${env.prefixUrl}${article.img})` }">
        <loudspeaker class="cover-speak" isContinued :isAutoPlay="isAutoPlay" :voice="currentVoice"
          @onVoiceEnded="handleVoiceEnded" @on-continued="handleSetRestart" />
      </view>
      <view v-if="showAllRender" class="article-render">
        <image class="render" @click="handleAllRender" :src="isAllRender ? allRenderActiveIcon : allRenderIcon" />
      </view>
      <view class="article-content">
        <view class="content" v-for="(item, index) in article.content" :key="index + item.sentences">
          <view class="sentences">
            {{ item.sentences }}
            <image v-if="item.translate" class="render-icon" @click="item.isRender = !item.isRender"
              :src="item.isRender ? renderActiveIcon : renderIcon" />
          </view>
          <text v-if="item.translate && item.isRender" class="translate">{{ item.translate }}</text>
        </view>
      </view>
      <view class="article-line"></view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import loudspeaker from "@/components/loudspeaker.vue";
import { AudioManager } from "@/utils/AudioManager";
import env from "@/config/env";

const renderIcon = "https://rwstatic.tentons.cn/web/Lesson/images/render-icon.png";
const renderActiveIcon = "https://rwstatic.tentons.cn/web/Lesson/images/render-icon-active.png";
const allRenderIcon = "https://rwstatic.tentons.cn/web/Lesson/images/render.png";
const allRenderActiveIcon = "https://rwstatic.tentons.cn/web/Lesson/images/render-active.png";

export type TArticle = {
  img?: string;
  content: {
    sentences: string;
    translate?: string;
    us_voice: string;
    isRender?: boolean;
  }[];
};

const isAllRender = ref(false);
const showAllRender = ref(false);
const article = ref<TArticle>({
  img: "",
  content: [],
});
const isAutoPlay = ref(false);
const voiceIndex = ref(0);
const articleVoice = ref<string[]>([]);

const currentVoice = computed(() => {
  return articleVoice.value[voiceIndex.value];
});

const handleInit = (data: TArticle) => {
  data.content.forEach((item) => {
    if (item.translate) {
      item["isRender"] = false;
      showAllRender.value = true;
    } else {
      showAllRender.value = false;
    }
    articleVoice.value.push(item.us_voice);
  });

  article.value = data;
};

const handleVoiceEnded = () => {
  if (voiceIndex.value < articleVoice.value.length - 1) {
    voiceIndex.value += 1;
    isAutoPlay.value = true;
  } else {
    handleRestart();
  }
};

const handleSetRestart = () => {
  voiceIndex.value = 0;
  isAutoPlay.value = true;
};

const handleRestart = () => {
  voiceIndex.value = 0;
  isAutoPlay.value = false;
  AudioManager.getInstance().stop();
};

const handleAllRender = () => {
  isAllRender.value = !isAllRender.value;
  article.value.content.forEach((item) => {
    item.isRender = isAllRender.value;
  });
};

defineExpose({
  handleInit,
  handleRestart,
});
</script>

<style scoped lang="scss">
.article-container {
  position: relative;
  height: 100%;
  margin-top: 1.5rem;

  .article-wrapper {
    height: 100%;
    padding: 0 2rem;
    overflow: auto;

    .article-cover {
      position: relative;
      width: 33.5rem;
      height: 16rem;
      margin-bottom: 0.6rem;
      background-size: contain;
      background-repeat: no-repeat;

      .cover-speak {
        position: absolute;
        bottom: 0.9rem;
        left: 0.9rem;
        width: 3.3rem;
        height: 3.3rem;
      }
    }

    .article-render {
      display: flex;
      justify-content: flex-end;
      width: 100%;
      margin-bottom: 0.6rem;

      .render {
        width: 2.4rem;
        height: 2.4rem;
      }
    }

    .article-content {
      width: 100%;

      .content {
        width: 100%;
        margin-bottom: 0.5rem;

        .sentences {
          margin-bottom: 0.5rem;
          font-size: 1.7rem;
          font-family: xiaolai;
          line-height: 1.6;
          color: $uni-text-color;
          white-space: pre-line;

          .render-icon {
            width: 2.7rem;
            height: 1.6rem;
            margin-bottom: 0.3rem;
            vertical-align: middle;
          }
        }

        .translate {
          font-size: 1.4rem;
          font-family: xiaolai;
          line-height: 1.6;
          color: $uni-text-color-grey;
          animation-name: fadeIn;
          animation-duration: 1s;
          animation-timing-function: ease-out;
          animation-iteration-count: forwards;
          animation-direction: normal;
        }

        @keyframes fadeIn {
          0% {
            opacity: 0;
          }

          100% {
            opacity: 1;
          }
        }
      }
    }

    .article-line {
      height: 15rem;
    }
  }
}
</style>
